---
permalink: "/backend/advanced/community/bottom-sheet/index.xml"
tags: "Advanced/Community/Elements"
hv_button_behavior: "back"
hv_title: "Bottom Sheet"
---

{% extends 'templates/scrollview.xml.njk' %}

{% from 'macros/button/index.xml.njk' import button %}

{% block styles %}
  <style id="bottom-sheet" backgroundColor="#fff" padding="24" />
{% endblock %}

{% block content %}
  <bottom-sheet:bottom-sheet
    xmlns:bottom-sheet="https://hyperview.org/bottom-sheet"
    bottom-sheet:toggle-event-name="bottom-sheet/toggle"
    bottom-sheet:animation-duration="250"
    bottom-sheet:dismissible="true"
    bottom-sheet:visible="false"
  >
    <view key="bottom-sheet-content" style="bottom-sheet">
      <text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc
        consectetur ultricies. Donec nec nunc consectetur, ultricies nunc nec, ultricies
        nunc. Nullam nec purus nec nunc consectetur ultricies. Donec nec nunc consectetur,
        ultricies nunc nec, ultricies nunc. Nullam nec purus nec nunc consectetur ultricies.
      </text>
    </view>
  </bottom-sheet:bottom-sheet>
  {% call button('Open bottom sheet') -%}
    <behavior
      action="dispatch-event"
      event-name="bottom-sheet/toggle"
      trigger="press"
    />
  {%- endcall %}
{% endblock %}
